<!--
 * @Author: C.
 * @Date: 2021-12-23 11:35:10
 * @LastEditTime: 2021-12-24 08:51:07
 * @Description: file content
-->
<template>
  <view class="j-login-page" :style="{ paddingTop: statusBarHeight + 'rpx' }">
    <view class="setting-block" @click="initShow = true">
      <u-icon name="setting-fill" size="20" color="#303133"></u-icon>
    </view>
    <!-- logo 软件标识 -->
    <view class="brand-block">
      <u--image
        src="/static/images/logo.png"
        width="292rpx"
        height="324rpx"
      ></u--image>
      <view style="margin: 30rpx 0">
        <u--image
          src="/static/images/Jvisoft.png"
          width="300rpx"
          height="80rpx"
        ></u--image>
      </view>
    </view>
    <!-- 表单 -->
    <view class="form-block">
      <u--form labelPosition="left" :model="form">
        <u-form-item :border-bottom="false" prop="UserName">
          <view class="input-style">
            <u-icon
              name="account"
              size="23"
              color="#303133"
              :bold="true"
            ></u-icon>
            <view class="input-gap">|</view>
            <u-input
              v-model="form.UserName"
              :clearable="false"
              border="none"
              fontSize="17px"
            />
          </view>
        </u-form-item>

        <u-form-item :border-bottom="false" prop="Password">
          <view class="input-style">
            <u-icon name="lock" size="23" color="#303133" :bold="true"></u-icon>
            <view class="input-gap">|</view>
            <u-input
              v-model="form.Password"
              :clearable="false"
              border="none"
              fontSize="17px"
              type="password"
            />
          </view>
        </u-form-item>
      </u--form>
    </view>

    <!-- 登入 -->
    <view class="btn-block" @click="login">登录</view>
    <!-- 记住密码开关 -->
    <view class="switch-block">
      <view class="switch-text"> 记住密码 </view>
      <u-switch v-model="isSavePwd"></u-switch>
    </view>
    <!-- 版权标识 -->
    <view class="jv-copyright"> Copyright © 2005-2027 Jvisoft Inc </view>

    <!-- 设置模块 -->
    <u-modal
      :show="initShow"
      :show-cancel-button="true"
      @confirm="initConfirm"
      @cancel="initShow = false"
      title="初始化设置"
    >
      <view class="init-form-block">
        <u-form :model="initForm" ref="initForm" label-position="top">
          <u-form-item label="IP地址">
            <u-input v-model="initForm.ip" />
          </u-form-item>
          <u-form-item label="语言" @click="selectLang">
            <!-- <u-input
              v-model="initForm.language"
              type="select"
              @click="selectLang"
            />
            <u-icon slot="suffix" name="grid-fill"></u-icon> -->
            <u--input
              v-model="initForm.language"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择性别"
              border="none"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </u-form>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { login } from "@/api/basicModule/login";
export default {
  data() {
    return {
      statusBarHeight: 90,
      isSavePwd: false,
      form: {
        UserName: "cj",
        Password: "123456"
      },
      // 初始化弹框
      initShow: false,
      // 初始化表单
      initForm: {
        ip: "123",
        language: "中文"
      },
      langList: [
        {
          value: "zh_CN",
          label: "中文"
        },
        {
          value: "en",
          label: "English"
        }
      ]
    };
  },
  methods: {
    initConfirm() {
      console.log();
      this.initShow = false;
    },
    selectLang() {
      uni.showActionSheet({
        itemList: ["中文", "English"],
        success: (res) => {
          console.log(res);
        }
      });
    },
    login() {
      login(this.form).then((res) => {
        // console.log(res, 111);
        this.saveLoginMsg(res);
        uni.reLaunch({
          url: "/pages/Tooling/index"
        });
      });
    },
    saveLoginMsg(data) {
      uni.setStorageSync("token", data.ticket);
      uni.setStorageSync("user-msg", data);
    }
  }
};
</script>

<style lang="scss" scoped>
.j-login-page {
  // width: 750rpx;
  @include flexBox($ff: column);
  // padding: 30rpx;
  position: relative;
  .setting-block {
    position: absolute;
    top: 90rpx;
    left: 30rpx;
  }
  .brand-block {
    width: 680rpx;
    // height: 300rpx;
    min-height: 250rpx;
    padding-top: 70px;
    // background-color: pink;
    @include flexBox($ff: column);
  }
  .form-block {
    width: 680rpx;
    .input-style {
      @include flexBox($jc: flex-start);
      background-color: $j_bgc;
      border-radius: 40rpx;
      padding: 20rpx 30rpx;
      .input-gap {
        color: #ccc;
        margin: 0 20rpx;
      }
    }
  }
  .switch-block {
    @include flexBox;
    color: $j_content;
    .switch-text {
      margin-right: 20rpx;
      font-size: $j_fz;
    }
  }
  .btn-block {
    width: 640rpx;
    margin: 40rpx 0;
    border-radius: 40rpx;
    background-color: $j_theme;
    color: #fff;
    padding: 20rpx;
    font-size: 30rpx;
    @include flexBox;
  }
  .jv-copyright {
    position: fixed;
    width: 750rpx;
    @include flexBox;
    @include iosBottom;
    bottom: 0;
    left: 0;
    color: $j_content;
    font-size: $j_fz;
  }
  .init-form-block {
    width: 100%;
  }
}
</style>
